<template>


    <!-- 占位id 用于滚动事件 -->
    <div :id="menuData.fullPath.replace(/\//g, '_')"></div>

    <!-- 分组的标题 -->
    <!-- <div class="text-[12px] font-[400] leading-[16px] text-text--disabled h-[44px] pl-[12px] pt-[19px] mb-1"
        v-if="currentIndex == 1">
        Text
    </div> -->

    <!-- 有子菜单 -->
    <v-list-group v-if="menuData.children && menuData.children.length" :value="menuData.fullPath" :class="groupClass"
        :style="groupStyle">
        <template v-slot:activator="{ props }">
            <v-list-item v-bind="props" :value="menuData.fullPath" :title="menuData.meta.label"
                :path="menuData.fullPath" :class="itemClass" :style="itemStyle">
                <template v-slot:prepend>
                    <div class="w-[24px] h-[24px] mr-[6px] ml-[8px]">
                        <svg-icon iconClass="menu-home" size="24" v-if="currentIndex == 1"></svg-icon>
                        <div class="menu-prepend-icon" v-else>
                            <svg-icon iconClass="menu-gray-right" size="24"></svg-icon>
                        </div>
                    </div>
                </template>
                <template v-slot:append>
                    <div class="menu-append-icon w-[20px] h-[20px] mr-2">
                        <svg-icon iconClass="active-left" size="20" class="mr-[6px]"
                            v-if="currentIndex == 1"></svg-icon>
                    </div>
                </template>
                <template v-slot:title>
                    <div class="text-[14px] font-[500] text-text--primary whitespace-normal">{{ menuData.meta.label }}
                    </div>
                </template>
            </v-list-item>
        </template>
        <menuItem :fatherIndex="currentIndex" :menuData="item" v-for="(item, index) in menuData.children" :key="index">
        </menuItem>
    </v-list-group>

    <!-- 无子菜单 -->
    <v-list-item v-else v-bind="props" :value="menuData.fullPath" :title="menuData.meta.label" :path="menuData.fullPath"
        :class="itemClass" :style="itemStyle">
        <template v-slot:prepend>
            <div class="w-[24px] h-[24px] mr-[6px] ml-[8px]">
                <svg-icon iconClass="menu-home" size="24" v-if="currentIndex == 1"></svg-icon>
                <!-- <div class="menu-prepend-icon" v-else>
                    <svg-icon iconClass="menu-gray-right" size="24"></svg-icon>
                </div> -->
            </div>
        </template>
        <template v-slot:append>

        </template>
        <template v-slot:title>
            <div class="text-[14px] font-[500] text-text--primary whitespace-normal">{{ menuData.meta.label }}</div>
        </template>
    </v-list-item>
</template>

<script lang="ts" setup>
import menuItem from "../components/menuItem.vue";

import { ref, toRaw, inject } from 'vue';
import { useCurrentInstance } from "@Hooks/index.ts";
const proxy = useCurrentInstance().proxy;

const props = defineProps({
    // 菜单数据
    menuData: {
        type: Object,
        defautl: () => { }
    },
    // 父亲的层级
    fatherIndex: {
        type: Number,
        defautl: 0
    }
})

const menuData = ref(props.menuData);

// 当前层级
const currentIndex = (props.fatherIndex || 0) + 1;

var groupClass = getGroupClass();
var itemClass = getItemClass();
var groupStyle = getGroupStyle();
var itemStyle = getItemStyle();

/**
 * 返回 列表组的样式表的标记
 */
function getGroupClass() {
    let groupClassStr = "my-menu-list-group my-menu-list-group-" + currentIndex;
    return groupClassStr;
}
function getGroupStyle() {
    let groupStyle = {};
    return groupStyle;
}
/**
 * 返回 列表项的样式表的标记
 */
function getItemClass() {
    let itemClass = "my-menu-list-item my-menu-list-item-" + currentIndex;
    return itemClass;
}
function getItemStyle() {
    let itemStyle = {};
    if (currentIndex > 2) {
        itemStyle['padding-left'] = (currentIndex - 2) * 16 + 'px !important';
    }
    return itemStyle;
}
</script>

<style scoped>
.my-menu-list-group {
    padding: 0 !important;
}

.my-menu-list-item {
    padding: 0 !important;
    margin-bottom: 4px;
}


/* 插槽箭头图标 */
.menu-append-icon,
.menu-prepend-icon {
    transform: rotate(0);
    transition: all 0.2s;
    transform-origin: center center;
}

/* 选中箭头图标旋转 */
.my-menu-list-group :deep(.v-list-item--active .menu-append-icon) {
    transform: rotate(-90deg);
}

.my-menu-list-group :deep(.v-list-item--active .menu-prepend-icon) {
    transform: rotate(90deg);
}
</style>